<template>
	<div class="main_part">
		<h3>{{nowRowData.taskName}}</h3>
		<div class="introduction">
			<el-row>
				<el-col :span="12">考试类型：{{nowRowData.examineType==0?'正式':'模拟' }}</el-col>
				<el-col :span="12">姓名：{{ nowRowData.userName }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">考试地点:线上</el-col>
				<el-col :span="12">身份证号:{{ nowRowData.idCard }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">考试时间：{{ nowRowData.updateTime }}</el-col>
				<el-col :span="12">联系方式:{{ nowRowData.phone }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">考试时长：{{nowRowData.useTime}}分钟</el-col>
				<el-col :span="12">所属组织:{{ nowRowData.organizationName }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">总分数：{{nowRowData.totalScore  }}</el-col>
				<el-col :span="8"><span>总分数:</span><span class="green" style="font-size: 20px;font-weight: 700;">{{nowRowData.maxScore}}分</span></el-col>
			</el-row>
		</div>
		<div class="question" v-for="(el,index) in questionList" :key="index">
			<el-row>
				<el-col :span="8">题目名称:<span style="font-size: 14px;font-weight: 700;">{{ el.item.itemText }}</span></el-col>
				<el-col :span="8" :offset="6">分数:<span style="font-size: 14px;font-weight: 700;">{{ el.item.score }}</span></el-col>
				<el-col :span="2"><span :class="el.item.itemType ==0?'orange':'red'">{{ el.item.itemType ==0?'单选题':'多选题'}}</span></el-col>
			</el-row>
			<el-row>
				<el-col :span="24"
					>选择项:
					<el-radio-group v-if="el.itemType == 0" v-model="el.userAnswer" class="ml-4" disabled>
						<el-radio v-for="(option, optionIndex) in el.item.option1.split(',')" :label="option" size="large" :key="option + optionIndex">{{
							option
						}}</el-radio>
					</el-radio-group>

					<el-checkbox-group v-if="el.itemType == 1" v-model="el.optionuserAnswer" disabled>
						<el-checkbox v-for="(option, optionIndex) in el.item.option1.split(',')" :label="option" :key="option + optionIndex">{{ option }}</el-checkbox>
					</el-checkbox-group></el-col
				>
			</el-row>
			<el-row>
				<el-col :span="24"><span :class="el.userAnswer==el.item.answer?'green':'red'">选择答案:{{ el.userAnswer }}</span></el-col>
			</el-row>
			<el-row>
				<el-col :span="24"><span class="green">正确答案:{{ el.item.answer }}</span></el-col>
			</el-row>
			<el-row>
				<el-col :span="24">解析:{{ el.item.answerTip }}</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'

type Props = {
	nowRowData?: any
}
let props = withDefaults(defineProps<Props>(), {
	nowRowData: {},
})

let questionList:any =ref([])



// 正式考试
const getZSExamineItem = () => {
	let params = {
		taskId: props.nowRowData.taskId,
		recordId:props.nowRowData.taskRecordId
	}
	apiMod.view_bscExamineTaskItem_list(params).then((res) => {
		if (res.code == 0) {
			res.data.forEach(el=>{
				if(el.itemType ==1) {
					if(el.userAnswer){
						el.optionuserAnswer = el.userAnswer.split(",")
					}
				}
			})
			questionList.value = res.data
		}
	})
}
// 模拟考试
const getMNExamineItem = () => {
	let params = {
		recordId: props.nowRowData.id,
	}
	apiMod.view_bscExamineImitateItem_list(params).then((res) => {
		if (res.code == 0) {
			res.data.forEach(el=>{
				if(el.itemType ==1) {
					if(el.userAnswer){
						el.optionuserAnswer = el.userAnswer.split(",")
					}
				}
			})
			questionList.value = res.data
		}
	})
}
// 获取相关的题库以及答题数据
// 0为正式考试，1为模拟考试
props.nowRowData.examineType == 0 ?getZSExamineItem():getMNExamineItem()

</script>
<style scoped lang="scss">
.main_part {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.el-row {
		margin-bottom: 20px;
	}
	.introduction {
		height: 200px;
		width: 80%;
		background-color: #f8f8f8;
		padding: 10px;
		box-sizing: border-box;
	}
	.question {
		margin: 20px auto;
		min-height: 200px;
		line-height: 15px;
		width: 70%;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid black;
	}
}
.green{
	color: green;
}
.red{
	color: red;
}
.orange{
	color:orange
}
</style>
